<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>会员购</title>
    <link rel="stylesheet" href="./all.css">
    <script src="../font/iconfont.js"></script>
    <style>
        html {
            font-size: 62.5%;
        }

        body {
            margin-top: 5.5rem;
            margin-bottom: 5.5rem;
            background-color: rgb(241, 242, 244);
        }

        .bnav>li:nth-of-type(4) svg {
            color: rgb(253, 102, 153);
        }

        .bnav>li:nth-of-type(4) p {
            color: rgb(253, 102, 153);
        }

        .head {
            width: 100%;
            height: 5.5rem;
            display: flex;
            position: fixed;
            left: 0;
            top: 0;
            align-items: center;
            background-color: #fff;
        }

        .weight {
            width: 20%;
            font-size: 1.8rem;
            line-height: 6rem;
            font-weight: bold;
            text-align: center;
        }

        .hui {
            font-size: 1.4rem;
            color: #ccc;
            flex-grow: 1;
            line-height: 6rem;
        }

        .svg {
            width: 12%;
            text-align: center;
        }

        .svg svg {
            font-size: 2.5rem;
        }

        .head>li:nth-of-type(5) svg {
            font-size: 2rem;
        }

        .scroll-search {
            width: 21.4rem;
            background-color: rgb(241, 242, 244);
            border-radius: 2rem;
            padding-left: 1rem;
            position: fixed;
            left: 1rem;
            top: 1.3rem;
            display: none;
        }

        .scroll-search>svg {
            font-size: 1.1rem;
            background-color: rgb(241, 242, 244);
            margin-bottom: .1rem;
            margin-left: .1rem;
        }

        .scroll-search>input {
            width: 15rem;
            height: 3rem;
            background-color: rgb(241, 242, 244);
            border: none;
            outline: none;
            margin-left: .3rem;
        }

        ::-webkit-input-placeholder {
            /* WebKit, Blink, Edge */
            color: #ccc;
            font-size: 1.4rem;
        }

        .search {
            height: 5rem;
            display: flex;
            align-items: center;
            background-color: #fff;
            justify-content: space-around;
        }

        .search>div {
            height: 3rem;
            margin-left: .5rem;
            background-color: rgb(241, 242, 244);
            display: flex;
            align-items: center;
            border-radius: .5rem;
        }

        .search>div>svg:nth-of-type(1) {
            font-size: 1.2rem;
            margin-left: .8rem;
            margin-right: .2rem;
        }

        .search>div>svg:nth-of-type(2) {
            font-size: 2rem;
            margin-right: .8rem;
        }

        .search>div>input {
            width: 27rem;
            height: 3rem;
            flex-grow: 1;
            background-color: rgb(241, 242, 244);
            outline: none;
            border: none;
        }

        .search>svg {
            font-size: 2.5rem;
            margin-right: .5rem;
        }

        .mjc {
            height: 8rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
            background-color: #fff;

        }

        .mjc>li {
            width: 30%;
            height: 5.5rem;
            font-size: 1.4rem;
            font-weight: bold;
            border-radius: 1rem;
            background-color: rgba(253, 102, 153, .5);
            display: flex;
            align-items: center;
            justify-content: space-around;
        }

        .mjc>li:nth-of-type(1) {
            margin-left: .5rem;
        }

        .mjc>li:nth-of-type(3) {
            margin-right: .5rem;
        }

        .mjc>li>svg {
            font-size: 4.5rem;
        }

        .fen {
            height: 7rem;
            display: flex;
            align-items: center;
            justify-content: space-around;
            background-color: #fff;
            padding: 0 .5rem;
        }

        .fen>li {
            width: 17%;
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .fen svg {
            width: 80%;
            font-size: 3rem;
        }

        .fen p {
            font-size: 1rem;
        }

        ul:nth-of-type(4) {
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-wrap: wrap;
            background: linear-gradient(#fff, rgb(241, 242, 244));
        }

        ul:nth-of-type(4)>li {
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-wrap: wrap;
            border-radius: 1rem;
        }

        .big {
            width: 47%;
            height: 13rem;
            background-color: blueviolet;
        }

        .one>svg {
            font-size: 8rem;
        }

        .two>svg {
            font-size: 5rem;
        }

        .small {
            margin-top: .8rem;
            width: 22%;
            height: 11.3rem;
            font-size: 1.4rem;
            font-weight: bold;
            background-color: #fff;
        }

        .small svg {
            width: 80%;
            font-size: 3.5rem;
        }

        .list {
            display: flex;
            align-items: center;
            justify-content: space-around;
            flex-wrap: wrap;
        }

        .list li {
            width: 47%;
            height: 28rem;
            background-color: #fff;
            border-radius: 1rem;
            margin-top: .8rem;
        }

        .list li>img {
            width: 100%;
            height: 18.5rem;
        }

        .list li>p {
            width: 95%;
            height: 4rem;
            font-size: 1.4rem;
            line-height: 2rem;
            margin: 1rem .5rem;
            overflow: hidden;
        }

        .list li>div {
            display: flex;
            align-items: flex-end;

        }

        .list li>div>p {
            font-size: 1.2rem;
        }

        .list li>div>p:nth-of-type(1) {
            font-size: 1.4rem;
            color: rgb(253, 102, 153);
            margin-left: .5rem;
            line-height: 2.1rem;
        }

        .list li>div>p:nth-of-type(2) {
            font-size: 1.8rem;
            font-weight: bold;
            color: rgb(253, 102, 153);
            flex-grow: 1;
            margin-left: .2rem;
        }

        .list li>div>p:nth-of-type(3) {
            width: 50%;
            color: #ccc;
            text-align: right;
            margin-right: .5rem;
            line-height: 2rem;
        }
    </style>
</head>

<body>
    <!-- 顶部固定不动 head -->
    <ul class="head">
        <li class="weight">会员购</li>
        <li class="hui">官方直营 · 正品保障</li>
        <li class="svg">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiaoxihezi-kong"></use>
            </svg>
        </li>
        <li class="svg">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gouwuche"></use>
            </svg>
        </li>
        <li class="svg">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-wode1"></use>
            </svg>
        </li>
    </ul>
    <div class="scroll-search">
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-sousuo1"></use>
        </svg>
        <input type="search" placeholder="19001010112 杨博文">
    </div>
    <!-- 搜索栏 -->
    <div class="search">
        <div>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-sousuo1"></use>
            </svg>
            <input type="search" placeholder="LASER&MANTA的闪耀专场">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiangji"></use>
            </svg>
        </div>
        <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-all"></use>
        </svg>
    </div>
    <!-- 漫威 精灵宝可梦 超级马里欧 -->
    <ul class="mjc">
        <li>
            钢铁侠
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-gangtiezhizhuxia"></use>
            </svg>
        </li>
        <li>
            精灵球
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-pokeballs"></use>
            </svg>
        </li>
        <li>
            蜘蛛侠
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xinghongzhizhuxia"></use>
            </svg>
        </li>
    </ul>
    <!-- 分类 -->
    <ul class="fen">
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-08"></use>
            </svg>
            <p>手办</p>
        </li>
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-13"></use>
            </svg>
            <p>周边</p>
        </li>
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-03"></use>
            </svg>
            <p>漫展电影</p>
        </li>
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-05"></use>
            </svg>
            <p>图书漫画</p>
        </li>
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-15"></use>
            </svg>
            <p>游戏装备</p>
        </li>
        <li>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-01"></use>
            </svg>
            <p>次元服饰</p>
        </li>
    </ul>
    <ul>
        <li class="big one">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-10"></use>
            </svg>
        </li>
        <li class="big two">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-07"></use>
            </svg>
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-04"></use>
            </svg>
        </li>
        <li class="small">今日上新
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-29"></use>
            </svg>
        </li>
        <li class="small">抢先看
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-33"></use>
            </svg>
        </li>
        <li class="small">人气排行
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-38"></use>
            </svg>
        </li>
        <li class="small">签到有礼
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-35"></use>
            </svg>
        </li>
    </ul>
    <ul class="list">
        <!-- <li>
            <img src="../img/bilibili3/小电视长条颈枕.png" alt="">
            <p>哔哩哔哩 小电视长条颈枕 周边</p>
            <div>
                <p>¥</p>
                <p>99</p>
                <p>99人想要</p>
            </div>
        </li> -->
    </ul>

    <ul class="bnav">
        <li>
            <a href="./bilibili1.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wode"></use>
                </svg>
                <p>首页</p>
            </a>
        </li>
        <li>
            <a href="./bilibili2.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-dongtai"></use>
                </svg>
                <p>动态</p>
            </a>
        </li>
        <li>
            <a href="#">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-checkbox-plus-full-copy"></use>
                </svg>
            </a>
        </li>
        <li>
            <a href="./bilibili3.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-gouwudai"></use>
                </svg>
                <p>会员购</p>
            </a>
        </li>
        <li>
            <a href="./bilibili4.html">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-wodewo"></use>
                </svg>
                <p>我的</p>
            </a>
        </li>
    </ul>
    <script>
        var goodslist = document.querySelector(".list");
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 浏览器执行代码
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                //xmlhttp.responseText;
                //你的ajax代码写在这里，其他位置除了open的前两个参数都不需要也不要改变。
                //ajax加载成功之后的代码执行位置
                var goods = JSON.parse(xmlhttp.responseText);
                goods.forEach(function (v) {
                    var newl = document.createElement("li");
                    newl.innerHTML = `
                <img src="${v.img}" alt="">
                <p>${v.introduce}</p>
                <div>
                    <p>¥</p>
                    <p>${v.price}</p>
                    <p>${v.want}</p>
                </div>`;
                    goodslist.appendChild(newl);
                });
                //只有用http的方式查看网页的运行结果才可以避免用本地网页的方式查看ajax运行结果。
                //vs code中可以使用liver server，post请求用专业的HTTP服务器
            }
        }
        xmlhttp.open("GET", "http://rap2api.taobao.org/app/mock/295104/FQ/bilibili3", true);
        xmlhttp.send();

        

        window.onscroll = function () {
            var scrollsearch = document.querySelector(".scroll-search");
            var st = document.documentElement.scrollTop || document.body.scrollTop;
            if (st > 150) {
                scrollsearch.style.display = "block";
            } else {
                scrollsearch.style.display = "none";
            }
        }
    </script>
</body>

</html>